<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn1">获取数据</button>

    <script>
        var btn1 = document.querySelector('.btn1');
        function getData() {
            // 1、创建对象
            var ajax_ = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTT');
            //2、建立连接
            ajax_.open('get', 'http://localhost:3000/report/new', true);

            //3、发送请求
            ajax_.send();

            //4、接收服务器数据
            ajax_.onreadystatechange = function () {
                /*  if(ajax_.readyState==4 &&ajax_.status == 200 ){
                     console.log(ajax_.responseText);
                 } */

                if (ajax_.readyState == 4) {
                    if (ajax_.status == 200) {
                        // console.log(ajax_.responseText); // 到这里已经获取了数据 但格式是字符串 需要转换
                        var res = JSON.parse(ajax_.responseText);
                        // console.log(res);
                        for(var i=0; i<res.length;i++) {
                            var p = document.createElement('p');
                            p.innerHTML = res[i].text;
                            document.body.appendChild(p)
                        }
                    } else {
                        console.log('获取连接失败');
                    }
                }
            }
        }

        window.onload = function() {
            getData()
        }
    </script>
</body>

</html>